<template>
    <div class="login-body">
        <div class="title">
            <span class="lead big">农产品溯源</span>
            <span class="lead small">信誉凭证，让消费者购买舒心，消费放心</span>
        </div>
        <div class="content panel panel-success">
            <div class="panel-heading">
                <img class="img-circle logo-img" src="../assets/images/logo.png"/>
                <span>管理员登录</span>
            </div>
            <div class="panel-body">
                <form>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                            <input type="text" class="form-control" placeholder="邮箱/用户名" v-model="account">
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                            <input type="password" class="form-control" placeholder="密码" v-model="password">
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-hand-right"></span></div>
                            <input type="text" class="form-control" placeholder="验证码" v-model="code">
                            <div class="input-group-addon imgcode" @click="changeCode()">
                                <img class="form-code" :src="imgCodeUrl">
                            </div>
                        </div>
                        <div class="form-small">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" v-model="isRemember">
                                    <small>记住登录状态</small>
                                </label>
                            </div>
                        </div>
                        <button type="button" @click="toSubmit()"
                                class="btn-login btn btn-success btn-lg btn-block btg-letter-spacing">登录
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <footer class="footer">
            <p>Copyright &copy;2016 易溯 All Rights Reserved.</p>
        </footer>
    </div>
</template>

<script>
    var cookieUtil = require('../util/CookieUtil');
    module.exports = {
        data: function () {
            return {
                account: '',
                password: '',
                code: '',
                imgCodeUrl: '/api/planb/getCode?len=' + Math.random(),
                isRemember: false
            }
        },
        ready: function () {
            var _this = this;
            var ac = cookieUtil.getCookie('ac');
            if (ac != "" && ac != null) {
                _this.account = ac;
            }
        },
        methods: {
            toSubmit: function () {
                var _this = this;
                if (this.account == '' || this.password == '' || this.code == '') {
                    alert("请填写完整信息！");
                    return;
                }
                $.post('/api/planb/doLogin', {
                    account: _this.account,
                    password: _this.password,
                    code: _this.code
                }).then(function (data) {
                    if (data.status == 'success') {
                        // 同步执行
                        (function () {
                            // 保存cookie
                            if (_this.isRemember) {
                                cookieUtil.setCookie("ac", _this.account, 365);
                            }
                            _this.$route.router.go({path: "/index"});
                        })(alert(data.msg));
                    } else {
                        alert(data.msg);
                        _this.password = '';
                        _this.code = '';
                        _this.$route.router.go({path: "/"});
                    }
                });
            },
            changeCode: function () {
                this.imgCodeUrl = '/api/planb/getCode?len=' + Math.random();
            }
        }
    };
</script>

<style>

    .login-body {
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #3283AC url("../assets/images/login_bg.jpg") no-repeat center;
    }

    .login-body .title {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        top: 30px;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100px;
    }

    .login-body .title .big {
        display: block;
        margin: 0;
        font-size: 35px;
        color: #F2DF0C;
        font-weight: 400;
        letter-spacing: 8px;
        text-shadow: 2px 3px 5px #7BA8A0;
    }

    .login-body .title .small {
        display: block;
        margin: 0;
        padding-top: 10px;
        font-size: 18px;
        font-style: italic;
        letter-spacing: 3px;
        color: #FFFFFF;
    }

    .login-body .content {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        top: 130px;
        right: 0;
        bottom: 0;
        left: 0;
        height: 400px;
        background: #FFFFFF
    }

    .login-body .input-group {
        border: 1px #E8E8E8 solid;
        height: 40px;
        margin-top: 20px;
    }

    .login-body .input-group-addon {
        color: #c0c0c0;
        background-color: inherit;
        border-color: #FFFFFF;
    }

    .login-body .form-control {
        border: none;
        padding-left: 0px;
        height: 40px;
    }

    .login-body .form-control:focus {
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .login-body .form-code {
        cursor: pointer;
        height: 40px;
        width: 80px;
    }

    .login-body .form-small {
        position: relative;
        height: 45px;
    }

    .login-body .imgcode {
        padding: 0px 0px;
        border: 0;
    }

    .login-body .form-small .checkbox {
        display: inline-block;
        position: absolute;
        left: 0px;
    }

    .login-body .logo-img {
        width: 7%;
        height: auto;
    }

    .login-body .btn-login {
        margin-top: 15px;
    }

    .login-body .btg-letter-spacing {
        letter-spacing: 15px;
    }

    .login-body .content span {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 0;
        margin-left: 2px;
        letter-spacing: 3px;
        top: 3px;
        font-size: 15px;
    }

    .login-body .footer {
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0px;
        border-top: 1px solid #E8E8E8;
        padding: 15px 0;
        font-size: 12px;
        color: #999;
        line-height: 22px;
        text-align: center
    }

</style>